<template>
  <div class="content-card">
    <div class="content-header">
      <h2 class="module-title">交流广场</h2>
    </div>
    <!-- 发布帖子区域 -->
    <div class="post-editor">
      <div class="input-section">
        <el-input 
          placeholder="请输入标题"
          class="post-title"
          v-model="postTitle"
        ></el-input>
        <el-input 
          type="textarea" 
          placeholder="分享你的想法..."
          class="post-input"
          v-model="postContent" 
          :rows="6"
          :autosize="{ minRows: 6, maxRows: 12 }"
        ></el-input>
      </div>
      
      <div class="upload-section">
        <div class="upload-header">
          <div class="upload-label">
            <el-icon class="upload-label-icon"><Picture /></el-icon>
            <span>添加图片</span>
            <span class="upload-tip">(最多5张)</span>
          </div>
        </div>
        <div class="upload-container">
          <el-upload
            class="upload-image"
            action="#"
            :auto-upload="false"
            :on-change="handleImageChange"
            :on-remove="handleRemove"
            :multiple="true"
            :limit="5"
            :file-list="imageFiles"
            list-type="picture-card"
          >
            <div class="upload-trigger">
              <el-icon class="upload-icon"><Plus /></el-icon>
            </div>
            <template #file="{ file }">
              <div class="image-item">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <div class="image-overlay">
                  <span class="image-action" @click="handlePictureCardPreview(file)">
                    <el-icon><ZoomIn /></el-icon>
                  </span>
                  <span class="image-action delete-action" @click="handleRemove(file)">
                    <el-icon><Delete /></el-icon>
                  </span>
                </div>
              </div>
            </template>
          </el-upload>
        </div>
      </div>

      <div class="editor-controls">
        <el-button 
          type="primary" 
          class="publish-btn"
          @click="handlePost"
        >
          <el-icon class="btn-icon"><ChatRound /></el-icon>
          发布
        </el-button>
        <el-button 
          class="preview-btn"
          @click="togglePreview"
        >
          <el-icon class="btn-icon"><ZoomIn /></el-icon>
          {{ isPreviewMode ? '编辑' : '预览' }}
        </el-button>
      </div>
    </div>

    <!-- 预览区域 -->
    <div class="post-preview" v-if="isPreviewMode">
      <h3 class="preview-title">{{ postTitle || '无标题' }}</h3>
      <div class="preview-content">{{ postContent || '请输入内容...' }}</div>
      <div class="preview-images" v-if="imageFiles.length > 0">
        <div class="preview-image-item" v-for="(file, index) in imageFiles" :key="index">
          <img :src="file.url || (file.raw ? URL.createObjectURL(file.raw) : '')" alt="预览图片">
        </div>
      </div>
    </div>

    <!-- 帖子列表 -->
    <div class="post-list">
      <!-- 帖子项 -->
      <div class="post-item" v-for="post in posts" :key="post.id">
        <div class="post-header">
          <div class="user-avatar" @click="goToUserProfile(post.userId)">
            <img class="avatar-img" :src="post.avatar || '/default-avatar.png'" :alt="post.username" />
          </div>
          <div class="user-info">
            <div class="username" @click="goToUserProfile(post.userId)">{{ post.username }}</div>
            <div class="post-time">{{ formatTime(post.createTime) }}</div>
          </div>
        </div>
        <div class="post-body">
          <h3 class="post-title-text">{{ post.title || '无标题' }}</h3>
          <div class="post-content-text">{{ post.content }}</div>
          <div class="post-images" v-if="post.imageUrls && post.imageUrls.length > 0">
            <img v-for="(imageUrl, index) in post.imageUrls" :key="index" :src="imageUrl" alt="Post Image" class="post-image-item" />
          </div>
        </div>
        <div class="post-actions">
          <div class="action-btn like-btn" :class="{ 'liked': post.isLiked }" @click="toggleLike(post)">
            <el-icon>
              <svg v-if="post.isLiked" viewBox="0 0 1024 1024" width="16" height="16">
                <path d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 0 0-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 0 0 471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.8-5.4 99.3-41.3 180.7-131 180.7-235.1 0-52.7-19.7-101.9-55.9-139.5z" fill="currentColor"/>
              </svg>
              <svg v-else viewBox="0 0 1024 1024" width="16" height="16">
                <path d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 0 0-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 0 0 471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.8-5.4 99.3-41.3 180.7-131 180.7-235.1 0-52.7-19.7-101.9-55.9-139.5zM720 704H256V512h464v192zm64 0V512c0-17.7-14.3-32-32-32H240c-17.7 0-32 14.3-32 32v192c0 17.7 14.3 32 32 32h512c17.7 0 32-14.3 32-32z" fill="currentColor"/>
              </svg>
            </el-icon>
            <span class="action-count">{{ post.likeCount || 0 }}</span>
          </div>
          <div class="action-btn comment-btn" @click="showComments(post)">
            <el-icon><ChatRound /></el-icon>
            <span class="action-count">{{ post.commentCount || 0 }}</span>
          </div>
          <div class="action-btn share-btn" @click="sharePost(post)">
            <el-icon><Share /></el-icon>
            <span class="action-text">分享</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 评论对话框 -->
    <el-dialog
      v-model="showCommentsDialog"
      :title="`评论 (${comments.length})`"
      width="90%"
      :modal="true"
      :close-on-click-modal="true"
      :close-on-press-escape="true"
      :show-close="true"
      :destroy-on-close="false"
      :append-to-body="true"
      :lock-scroll="true"
      @close="() => { showCommentsDialog = false; comments = []; }"
      :before-close="() => { showCommentsDialog = false; comments = []; }"
      custom-class="comments-dialog-custom"
      :style="{ maxWidth: '800px' }"
    >
      <!-- 评论列表 -->
      <div class="comments-container">
        <div v-if="loadingComments" class="loading-comments">
          <el-icon class="is-loading"><Loading /></el-icon>
          <span>加载评论中...</span>
        </div>
        
        <div v-else-if="comments.length === 0" class="no-comments">
          <el-icon><ChatRound /></el-icon>
          <span>暂无评论，快来抢沙发吧~</span>
        </div>
        
        <div v-else class="comments-list" @scroll="handleCommentsScroll" ref="commentsListRef">
          <div v-for="comment in comments" :key="comment.id" class="comment-item">
            <div class="comment-header">
              <div class="comment-user">
                <img class="comment-avatar" :src="comment.avatar || '/default-avatar.png'" :alt="comment.username" />
                <span class="comment-username">{{ comment.username }}</span>
              </div>
              <div class="comment-actions">
                <span class="comment-time">{{ formatCommentTime(comment.createTime) }}</span>
                <el-button
                  v-if="comment.userId === getCurrentUserId()"
                  type="danger"
                  size="small"
                  text
                  @click="handleDeleteComment(comment)"
                >
                  删除
                </el-button>
              </div>
            </div>
            <div class="comment-content">{{ comment.content }}</div>
          </div>
          
          <!-- 加载更多评论的提示 -->
          <div v-if="loadingMoreComments" class="loading-more-comments">
            <el-icon class="is-loading"><Loading /></el-icon>
            <span>加载更多评论中...</span>
          </div>
          
          <div v-else-if="!hasMoreComments && comments.length > 0" class="no-more-comments">
            <span>没有更多评论了</span>
          </div>
        </div>
      </div>
      
      <!-- 添加评论 -->
      <div class="add-comment-section">
        <el-input
          v-model="newComment"
          type="textarea"
          placeholder="写下你的评论..."
          :rows="3"
          maxlength="500"
          show-word-limit
          class="comment-input"
        />
        <div class="comment-submit">
          <el-button type="primary" @click="submitComment" :disabled="!newComment.trim()">
            发表评论
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
// 修正图标导入
import { ThumbUpFilled, ChatRound, Share, Plus, Delete, ZoomIn, Picture, Loading } from '@element-plus/icons-vue';
// 新增：导入获取帖子API
import { getPosts, createPost, likePost, unlikePost, getComments, addComment, deleteComment } from '@/api/post';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import Message from '@/utils/message';

// 获取路由实例
const router = useRouter();

// 时间格式化函数
const formatTime = (timeString) => {
  if (!timeString) return '刚刚';
  
  const now = new Date();
  const postTime = new Date(timeString);
  const diffMs = now - postTime;
  const diffMinutes = Math.floor(diffMs / (1000 * 60));
  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
  
  if (diffMinutes < 1) {
    return '刚刚';
  } else if (diffMinutes < 60) {
    return `${diffMinutes}分钟前`;
  } else if (diffHours < 24) {
    // 24小时内显示小时和分钟
    const remainingMinutes = diffMinutes % 60;
    if (remainingMinutes === 0) {
      return `${diffHours}小时前`;
    } else {
      return `${diffHours}小时${remainingMinutes}分钟前`;
    }
  } else if (diffDays <= 2) {
    // 超过24小时但不超过2天，显示天数
    return `${diffDays}天前`;
  } else {
    // 超过2天，显示具体年月日时分秒
    return postTime.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      hour12: false
    });
  }
};

// 加载更多评论
const loadMoreComments = async () => {
  if (!hasMoreComments.value || loadingMoreComments.value) {
    return;
  }
  await loadComments(currentPost.value.id, true);
};

// 处理评论列表滚动事件
const handleCommentsScroll = (event) => {
  const { scrollTop, scrollHeight, clientHeight } = event.target;
  // 当滚动到距离底部50px时，自动加载更多
  if (scrollHeight - scrollTop - clientHeight < 50) {
    loadMoreComments();
  }
};

// 点赞功能
const toggleLike = async (post) => {
  const originalLikedState = post.isLiked;
  const originalLikeCount = post.likeCount;

  // 立即更新UI
  post.isLiked = !post.isLiked;
  if (post.isLiked) {
    post.likeCount++;
  } else {
    post.likeCount--;
  }

  try {
    if (post.isLiked) {
      await likePost(post.id);
      Message.success('点赞成功');
    } else {
      await unlikePost(post.id);
      Message.info('取消点赞');
    }
  } catch (error) {
    // 如果API调用失败，则恢复原始状态
    post.isLiked = originalLikedState;
    post.likeCount = originalLikeCount;
    Message.error('操作失败，请重试');
    console.error('点赞/取消点赞失败:', error);
  }
};

// 评论相关状态
const showCommentsDialog = ref(false);
const currentPost = ref(null);
const comments = ref([]);
const newComment = ref('');
const loadingComments = ref(false);
const currentPage = ref(0);
const hasMoreComments = ref(true);
const loadingMoreComments = ref(false);
const commentsListRef = ref(null);

// 显示评论
const showComments = async (post) => {
  currentPost.value = post;
  showCommentsDialog.value = true;
  // 重置分页状态
  currentPage.value = 0;
  hasMoreComments.value = true;
  comments.value = [];
  await loadComments(post.id);
};

// 加载评论列表
const loadComments = async (postId, isLoadMore = false) => {
  try {
    if (isLoadMore) {
      loadingMoreComments.value = true;
    } else {
      loadingComments.value = true;
    }
    
    const response = await getComments(postId, currentPage.value, 5);
    const newComments = Array.isArray(response.data) ? response.data : [];
    
    if (isLoadMore) {
      // 追加新评论到现有列表
      comments.value = [...comments.value, ...newComments];
    } else {
      // 首次加载，直接设置评论列表
      comments.value = newComments;
    }
    
    // 如果返回的评论数量少于每页数量，说明没有更多评论了
    if (newComments.length < 5) {
      hasMoreComments.value = false;
    }
    
    // 增加页码
    currentPage.value++;
    
  } catch (error) {
    console.error('获取评论失败:', error);
    Message.error('获取评论失败');
    if (!isLoadMore) {
      comments.value = [];
    }
  } finally {
    loadingComments.value = false;
    loadingMoreComments.value = false;
  }
};

// 添加评论
const submitComment = async () => {
  if (!newComment.value.trim()) {
    Message.warning('请输入评论内容');
    return;
  }
  
  if (newComment.value.length > 500) {
    Message.warning('评论内容不能超过500字符');
    return;
  }
  
  try {
    const commentData = {
      postId: currentPost.value.id,
      content: newComment.value.trim(),
      parentId: 0 // 顶级评论
    };
    
    await addComment(commentData);
    Message.success('评论成功');
    newComment.value = '';
    
    // 重置分页状态并重新加载评论列表
    currentPage.value = 0;
    hasMoreComments.value = true;
    comments.value = [];
    await loadComments(currentPost.value.id);
    
    // 更新帖子的评论数
    currentPost.value.commentCount = (currentPost.value.commentCount || 0) + 1;
    
    // 同时更新posts数组中对应的帖子
    const postIndex = posts.value.findIndex(p => p.id === currentPost.value.id);
    if (postIndex !== -1) {
      posts.value[postIndex].commentCount = currentPost.value.commentCount;
    }
    
  } catch (error) {
    console.error('添加评论失败:', error);
    Message.error('评论失败，请重试');
  }
};

// 删除评论
const handleDeleteComment = async (comment) => {
  try {
    await deleteComment(comment.id);
    Message.success('删除成功');
    
    // 重置分页状态并重新加载评论列表
    currentPage.value = 0;
    hasMoreComments.value = true;
    comments.value = [];
    await loadComments(currentPost.value.id);
    
    // 更新帖子的评论数
    currentPost.value.commentCount = Math.max((currentPost.value.commentCount || 1) - 1, 0);
    
    // 同时更新posts数组中对应的帖子
    const postIndex = posts.value.findIndex(p => p.id === currentPost.value.id);
    if (postIndex !== -1) {
      posts.value[postIndex].commentCount = currentPost.value.commentCount;
    }
    
  } catch (error) {
    console.error('删除评论失败:', error);
    Message.error('删除失败，请重试');
  }
};

// 格式化评论时间
const formatCommentTime = (timeString) => {
  if (!timeString) return '刚刚';
  
  const now = new Date();
  const commentTime = new Date(timeString);
  const diffMs = now - commentTime;
  const diffMinutes = Math.floor(diffMs / (1000 * 60));
  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
  
  if (diffMinutes < 1) {
    return '刚刚';
  } else if (diffMinutes < 60) {
    return `${diffMinutes}分钟前`;
  } else if (diffHours < 24) {
    return `${diffHours}小时前`;
  } else if (diffDays <= 7) {
    return `${diffDays}天前`;
  } else {
    return commentTime.toLocaleDateString('zh-CN');
  }
};

// 获取当前用户ID（用于判断是否可以删除评论）
const getCurrentUserId = () => {
  const token = localStorage.getItem('token');
  if (!token) return null;
  
  try {
    // 解析JWT token获取用户ID
    const payload = JSON.parse(atob(token.split('.')[1]));
    // JWT的subject字段存储的是用户ID
    return payload.sub ? parseInt(payload.sub) : null;
  } catch (error) {
    console.error('解析token失败:', error);
    return null;
  }
};

// 分享帖子
const sharePost = (post) => {
  Message.info('分享功能开发中...');
};

// 跳转到用户主页
const goToUserProfile = async (userId) => {
  if (!userId) {
    Message.warning('用户信息不完整');
    return;
  }
  try {
    // 跳转到用户主页，传递用户ID参数
    await router.push({
      name: 'UserProfile',
      params: { userId: userId }
    });
  } catch (error) {
    console.error('跳转用户主页失败:', error);
    Message.error('跳转失败，请重试');
  }
};

// 新增：定义响应式变量存储帖子数据
const posts = ref([]);

// 新增：组件挂载时获取帖子数据
onMounted(async () => {
  try {
    const response = await getPosts();
    // 后端返回的是Result结构，实际数据在response.data中
    // 确保 response.data 是数组，如果为 null 或 undefined 则设为空数组
    posts.value = Array.isArray(response.data) ? response.data : [];
    
    // 为每个帖子添加默认值（仅针对可能缺失的字段）
    posts.value = posts.value.map(post => ({
      ...post,
      avatar: post.avatar || '/images/default-avatar.png',
      likeCount: post.likeCount || 0
    }));
  } catch (error) {
    console.error('获取帖子失败:', error);
    Message.error('获取帖子失败，请检查网络连接或联系管理员');
    posts.value = []; // 设置为空数组，不显示测试数据
  }
});

// 新增：定义帖子内容响应式变量
const postTitle = ref('');
const postContent = ref('');
const imageFiles = ref([]);
const isPreviewMode = ref(false);

// 切换预览模式
const togglePreview = () => {
  isPreviewMode.value = !isPreviewMode.value;
};

// 处理图片选择
const handleImageChange = (file, fileList) => {
  imageFiles.value = fileList;
};

const handleRemove = (file) => {
  const index = imageFiles.value.findIndex(f => f.uid === file.uid);
  if (index !== -1) {
    imageFiles.value.splice(index, 1);
  }
};

const handlePictureCardPreview = (file) => {
  // Implement preview logic here if needed
};

// 新增：发布帖子方法
const handlePost = async () => {
  if (!postTitle.value.trim()) {
    Message.warning('请输入标题');
    return;
  }
  if (!postContent.value.trim()) {
    Message.warning('请输入帖子内容');
    return;
  }

  try {
    // 创建FormData对象
  const formData = new FormData();
  formData.append('title', postTitle.value);
  formData.append('content', postContent.value);
  
  // 添加图片文件
  imageFiles.value.forEach(file => {
    formData.append('images', file.raw);
  });
  
  await createPost(formData);
    Message.success('发布成功');
    postTitle.value = '';
  postContent.value = '';
  imageFiles.value = []; // 清空图片
    // 重新获取帖子列表
    const response = await getPosts();
    // 后端返回的是Result结构，实际数据在response.data中
    // 确保 response.data 是数组，如果为 null 或 undefined 则设为空数组
    posts.value = Array.isArray(response.data) ? response.data : [];
    
    // 为每个帖子添加默认值（仅针对可能缺失的字段）
    posts.value = posts.value.map(post => ({
      ...post,
      avatar: post.avatar || '/images/default-avatar.png',
      likeCount: post.likeCount || 0
    }));
  } catch (error) {
    console.error('发布失败:', error);
    Message.error('发布失败，请重试');
  }
};
</script>

<style scoped>
/* 顶部标题区域样式 */
.content-header {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: #ffffff;
  padding: 20px 25px;
  margin: -20px -20px 30px -20px;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.module-title {
  margin: 0;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* 简洁现代标题输入框样式 */
.post-title {
  margin-bottom: 16px;
}

.post-title {
  width: 100% !important;
}

.post-title :deep(.el-input__wrapper) {
  background: #ffffff;
  border: 2px solid #d1d5db !important;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 48px;
  padding: 0;
  width: 100% !important;
}

.post-title :deep(.el-input__inner) {
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 500;
  color: #1f2937;
  background: transparent;
  border: none;
  border-radius: 12px;
  line-height: 1.5;
  outline: none !important;
}

.post-title :deep(.el-input__wrapper),
.post-title :deep(.el-input__inner),
.post-title :deep(.el-input__wrapper *) {
  outline: none !important;
}

.post-title :deep(.el-input__inner::placeholder) {
  color: #9ca3af;
  font-size: 16px;
  font-weight: 400;
}

.post-title :deep(.el-input__wrapper:hover) {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

.post-title :deep(.el-input__wrapper.is-focus) {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), 0 4px 12px rgba(102, 126, 234, 0.15);
}

/* 简洁现代内容输入框样式 */
.post-input {
  width: 100% !important;
}

.post-input :deep(.el-input__wrapper),
.post-input :deep(.el-textarea__inner) {
  background: #ffffff;
  border: 2px solid #d1d5db !important;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 120px !important;
  padding: 0;
  width: 100% !important;
}

.post-input :deep(.el-input__inner) {
  padding: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: #1f2937;
  background: transparent;
  border: none;
  border-radius: 12px;
  min-height: 120px;
  resize: vertical;
  font-weight: 400;
  outline: none !important;
}

.post-input :deep(.el-input__wrapper),
.post-input :deep(.el-input__inner),
.post-input :deep(.el-input__wrapper *) {
  outline: none !important;
}

.post-input :deep(.el-input__inner::placeholder) {
  color: #9ca3af;
  font-size: 15px;
  font-weight: 400;
}

.post-input :deep(.el-input__wrapper:hover) {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

.post-input :deep(.el-input__wrapper.is-focus) {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), 0 4px 12px rgba(102, 126, 234, 0.15);
}

/* 移除重复的旧样式代码 */

/* 发帖子区域样式 */
.post-editor {
  margin-bottom: 30px;
  padding: 30px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.post-editor:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 45px rgba(0,0,0,0.15);
}

/* 输入区域布局 */
.input-section {
  margin-bottom: 25px;
}

/* 上传区域样式 */
.upload-section {
  margin-bottom: 25px;
}

.upload-header {
  margin-bottom: 16px;
}

.upload-label {
  font-size: 15px;
  font-weight: 600;
  color: #667eea;
  display: flex;
  align-items: center;
  gap: 8px;
}

.upload-label-icon {
  font-size: 18px;
  color: #667eea;
}

.upload-tip {
  font-size: 12px;
  color: rgba(102, 126, 234, 0.6);
  font-weight: 400;
  margin-left: 4px;
}

.upload-container {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(102, 126, 234, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.upload-container:hover {
  border-color: rgba(102, 126, 234, 0.4);
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
}

/* 简洁现代上传组件样式 */
.upload-image {
  width: 100%;
}

/* 上传列表布局 */
.upload-image :deep(.el-upload-list) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.upload-image :deep(.el-upload--picture-card) {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  border: 2px dashed rgba(102, 126, 234, 0.4);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
  margin: 0;
  overflow: hidden;
  position: relative;
}

.upload-image :deep(.el-upload--picture-card .el-upload) {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-image :deep(.el-upload--picture-card:hover) {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
}

.upload-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
}

.upload-icon {
  font-size: 28px !important;
  color: #667eea !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  line-height: 1;
}

.upload-image :deep(.el-upload--picture-card:hover) .upload-icon {
  color: #667eea !important;
  transform: scale(1.1);
}

/* 完全重写上传组件样式，确保只显示加号 */
.upload-image :deep(.el-upload--picture-card) {
  position: relative !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* 隐藏所有Element Plus默认内容 */
.upload-image :deep(.el-upload--picture-card > *:not(.upload-trigger)) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* 强制显示我们的上传触发器 */
.upload-image :deep(.el-upload--picture-card .upload-trigger) {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  z-index: 999 !important;
  color: initial !important;
  font-size: initial !important;
  line-height: initial !important;
}

.upload-image :deep(.el-upload--picture-card .upload-icon) {
  display: block !important;
  font-size: 28px !important;
  color: #667eea !important;
  z-index: 1000 !important;
}

.upload-image :deep(.el-upload--picture-card .el-icon) {
  display: inline-block !important;
  color: #667eea !important;
  z-index: 1000 !important;
}

/* 强制隐藏所有可能的文字内容 */
.upload-image :deep(.el-upload__text),
.upload-image :deep(.el-upload__tip),
.upload-image :deep(.el-upload-dragger__text),
.upload-image :deep(.el-upload--picture-card .el-upload__text),
.upload-image :deep(.el-upload--picture-card::before),
.upload-image :deep(.el-upload--picture-card::after) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  content: '' !important;
}

/* 覆盖任何可能的文字显示 */
.upload-image :deep(.el-upload--picture-card) {
  text-indent: -9999px !important;
}

.upload-image :deep(.el-upload--picture-card .upload-trigger) {
  text-indent: 0 !important;
}

/* 图片列表项样式 */
.upload-image :deep(.el-upload-list__item) {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(102, 126, 234, 0.2);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
  transition: all 0.3s ease;
  margin: 0;
}

.upload-image :deep(.el-upload-list__item:hover) {
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
}

.image-item {
  width: 100%;
  height: 100%;
  position: relative;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transition: all 0.3s ease;
  border-radius: 12px;
}

.upload-image :deep(.el-upload-list__item:hover) .image-overlay {
  opacity: 1;
}

.image-action {
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #667eea;
  font-size: 14px;
  border: 1px solid rgba(102, 126, 234, 0.2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.image-action:hover {
  background: #ffffff;
  transform: scale(1.15);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
  border-color: #667eea;
}

.delete-action:hover {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

.upload-image :deep(.el-upload-list__item img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-image :deep(.el-upload-list__item-thumbnail) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 移除旧的重复样式，使用新的image-overlay样式 */
/* 移除重复的旧样式代码 */

/* 按钮控制区域 */
.editor-controls {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid rgba(102, 126, 234, 0.2);
}

/* 发布按钮样式 */
.publish-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: none !important;
  border-radius: 25px !important;
  padding: 12px 30px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #ffffff !important;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.publish-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 15px 35px rgba(102, 126, 234, 0.6) !important;
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
}

.publish-btn:active {
  transform: translateY(-1px) !important;
}

/* 预览按钮样式 */
.preview-btn {
  background: rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(102, 126, 234, 0.3) !important;
  border-radius: 25px !important;
  padding: 12px 30px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #667eea !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.preview-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important;
  border-color: rgba(102, 126, 234, 0.6) !important;
  background: rgba(255,255,255,1) !important;
}

.preview-btn:active {
  transform: translateY(-1px) !important;
}

/* 按钮图标样式 */
.btn-icon {
  font-size: 16px !important;
}

/* 预览区域样式 */
.post-preview {
  margin-bottom: 25px;
  padding: 25px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(102, 126, 234, 0.2);
  border-radius: 20px;
  box-shadow: 0 12px 35px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.post-preview:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.15);
}

.preview-title {
  margin-top: 0;
  margin-bottom: 15px;
  color: #2c3e50;
  font-size: 20px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.preview-content {
  margin-bottom: 20px;
  line-height: 1.8;
  color: #4a5568;
  font-size: 15px;
  background: rgba(102, 126, 234, 0.05);
  padding: 15px 20px;
  border-radius: 12px;
  border-left: 4px solid #667eea;
}

.preview-images {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.preview-image-item {
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: 15px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(102, 126, 234, 0.2);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.preview-image-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(0,0,0,0.15);
}

.preview-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 帖子列表样式 */
.post-list {
  margin-top: 20px;
}

.post-item {
  padding: 24px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.post-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

/* 帖子头部样式 */
.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 2px;
  margin-right: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.user-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #f8f9fa;
}

.user-info {
  flex: 1;
}

.username {
  font-weight: 600;
  font-size: 16px;
  color: #1f2937;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  cursor: pointer;
  transition: all 0.3s ease;
}

.username:hover {
  transform: translateX(2px);
  filter: brightness(1.2);
}

.post-time {
  font-size: 13px;
  color: #6b7280;
  font-weight: 400;
}

/* 帖子内容样式 */
.post-body {
  margin-bottom: 16px;
}

.post-title-text {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.post-content-text {
  font-size: 16px;
  line-height: 1.8;
  color: #374151;
  margin-bottom: 16px;
  word-wrap: break-word;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.3px;
}

/* 帖子操作区域样式 */
.post-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 12px;
  border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 20px;
  background: rgba(102, 126, 234, 0.05);
  border: 1px solid rgba(102, 126, 234, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  color: #6b7280;
  user-select: none;
}

.action-btn:hover {
  background: rgba(102, 126, 234, 0.1);
  border-color: rgba(102, 126, 234, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.like-btn.liked {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.like-btn.liked:hover {
  background: rgba(239, 68, 68, 0.15);
}

.action-btn .el-icon {
  font-size: 16px;
}

.like-btn.liked .el-icon {
  color: #ef4444;
}

.action-count, .action-text {
  font-weight: 500;
  font-size: 13px;
}
.post-images {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 15px;
}

.post-image-item {
  width: 100px; /* 或者您希望的任何固定宽度 */
  height: 100px; /* 保持宽高一致 */
  object-fit: cover; /* 确保图片覆盖整个区域，可能会裁剪 */
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  max-width: 100%;
  height: auto;
}
.content-card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  padding: 20px;
  margin-bottom: 20px;
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 图片预览弹窗样式优化 */
:deep(.el-image-viewer__wrapper) {
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(15px);
}

:deep(.el-image-viewer__img) {
  max-width: 85vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* 关闭按钮样式 */
:deep(.el-image-viewer__close) {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 18px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

:deep(.el-image-viewer__close:hover) {
  background-color: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.3);
}

/* 左右切换按钮样式 */
:deep(.el-image-viewer__prev),
:deep(.el-image-viewer__next) {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 16px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

:deep(.el-image-viewer__prev:hover),
:deep(.el-image-viewer__next:hover) {
  background-color: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.3);
}

/* 隐藏工具栏中的其他图标 */
:deep(.el-image-viewer__actions) {
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 25px;
  padding: 8px 16px;
  backdrop-filter: blur(10px);
}

:deep(.el-image-viewer__actions .el-image-viewer__actions__inner) {
  gap: 12px;
}

:deep(.el-image-viewer__actions .el-image-viewer__actions__inner > *) {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 14px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

:deep(.el-image-viewer__actions .el-image-viewer__actions__inner > *:hover) {
  background-color: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.3);
}

/* 评论对话框样式 */
.comments-container {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.loading-comments {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 0;
  color: #6b7280;
  font-size: 14px;
}

.no-comments {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 0;
  color: #9ca3af;
  font-size: 14px;
}

.no-comments .el-icon {
  font-size: 32px;
  color: #d1d5db;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 8px;
}

.comments-list::-webkit-scrollbar {
  width: 6px;
}

.comments-list::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.comments-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.comments-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.loading-more-comments {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 0;
  color: #6b7280;
  font-size: 14px;
}

.no-more-comments {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  color: #9ca3af;
  font-size: 14px;
}

.comment-item {
  padding: 16px;
  background: #f9fafb;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}

.comment-item:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.comment-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e5e7eb;
}

.comment-username {
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.comment-time {
  font-size: 12px;
  color: #9ca3af;
}

.comment-content {
  color: #4b5563;
  line-height: 1.6;
  font-size: 14px;
  word-wrap: break-word;
}

.add-comment-section {
  border-top: 1px solid #e5e7eb;
  padding-top: 20px;
}

.comment-input {
  margin-bottom: 12px;
}

.comment-input :deep(.el-textarea__inner) {
  border-radius: 8px;
  border: 1px solid #d1d5db;
  transition: all 0.2s ease;
}

.comment-input :deep(.el-textarea__inner):focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.comment-submit {
  display: flex;
  justify-content: flex-end;
}

.comment-submit .el-button {
  border-radius: 8px;
  padding: 8px 20px;
  font-weight: 500;
}

/* 评论对话框标题样式 */
:deep(.el-dialog__header) {
  padding: 20px 20px 0 20px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 20px;
}

:deep(.el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

:deep(.el-dialog__body) {
  padding: 0 20px 20px 20px;
}

/* 滚动条样式 */
.comments-container::-webkit-scrollbar {
  width: 6px;
}

.comments-container::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.comments-container::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.comments-container::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* 评论对话框样式 - 居中显示 */
.comments-dialog-custom {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
}

/* 全局样式覆盖 */
:deep(.el-dialog__wrapper) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

:deep(.comments-dialog-custom) {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .comment-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .comment-actions {
    align-self: flex-end;
  }
}
</style>